<template>
    <a-layout class="content">
        <a-row>
            <a-col :xs="{ span: 20, offset: 2 }" :md="{ span: 10, offset: 7 }" class="search">
                <a-input-search placeholder="请输入文章标题关键字" size="large" @search="search" v-model="keywords">
                    <a-button slot="enterButton" @click="search">
                        搜索
                    </a-button>
                </a-input-search>
            </a-col>

            <!--搜索文章列表-->
            <a-col class="list" :xs="{ span: 20, offset: 2 }" :md="{ span: 18, offset: 3 }">
                <ArticleList :data="articles"/>
            </a-col>


            <!--分页控件-->
            <a-col span="24" style="text-align: center">
                <a-pagination v-show="pagination.totalPage > 1"
                              simple :default-current="1"
                              :current="pagination.pageNum"
                              :pageSize="pagination.pageSize"
                              :total="pagination.totle" @change="getDatas"/>
            </a-col>

        </a-row>
        <a-back-top />
    </a-layout>
</template>

<script>
    import { articles } from '../../assets/document/fackData';
    import ArticleList from "../Article/ArticleList";
    import {requsetArticleList, requsetMoreArticleList, requsetArticleSearchList} from "../../network/request";

    export default {
        name: "Search",
        components: {ArticleList},
        data() {
            return {
                articles: {},
                keywords: '',
                pagination: {
                    pageNum: 1,
                    pageSize: 10,
                    totle: 0,
                    totalPage: 0
                }
            };
        },
        created() {
            //获取文章列表
            requsetMoreArticleList().then(req => {
                this.articles = req;
                console.log(req);
            });
        },
        methods: {
            search() {
                this.getDatas(1, 10)
            },
            getDatas(page, pageSize) {
                console.log(pageSize + " : " + page);
                requsetArticleSearchList(page, pageSize, this.keywords).then(req => {
                    this.articles = req.list;
                    this.pagination.totle = req.total
                    this.pagination.pageNum = req.currPage
                    this.pagination.totalPage = req.totalPage
                });
            },
        }
    }
</script>

<style scoped>
    .search {
        padding: 50px 0;
    }
</style>
